<template>
	<view style="margin: 20rpx; 10rpx">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#57606F" class="header"></uni-segmented-control>
		<view class="content">
			<view v-if="current === 0">
				<view @click="open" style="padding: 20rpx 20rpx 10rpx 20rpx">
					{{ selectTitle }}
					<icon-svg :icon-class="status ? 'icon-test4 ' : 'icon-test6'" />
				</view>
				<uni-popup ref="popup" type="top">
					<view class="popup-box">
						<view class="select-title">
							<text>{{ selectTitle }}</text>
							<icon-svg :icon-class="status ? 'icon-test4 ' : 'icon-test6'" />
						</view>
						<view class="select-list">
							<view v-for="(item, index) in selectList" :key="index" style="position: relative;">
								<uni-tag class="tags" circle inverted :type="currentSelect == index ? 'warning' : 'default'" :text="item.title" @click="handleSelect(item, index)"></uni-tag>
								<icon class="tag-icon" size="16" v-if="currentSelect == index" type="success_no_circle" color="#33B4C5"></icon>
							</view>
						</view>
					</view>
				</uni-popup>
				<view class="input-box"><input type="text" value="" style="margin-left:20rpx;" placeholder="搜索标题/单号或提交人" /></view>
				<view class="item" v-for="item in data" :key="item.id" @click="handleClick(item)">
					<view class="right">
						<view class="line1">
							<span class="circle"></span>
							<span style="font-size: 14px;">{{ item.status }}</span>
						</view>
						<view class="line2">
							<span style="">{{ item.name }}</span>
							<span style="font-weight: 600;" class="fr">{{ item.money }}</span>
						</view>
						<view class="line3">
							<span style="margin-right: 30rpx;">{{ item.type }}</span>
							<span style="">{{ item.id }}</span>
							<span class="noConfirm">{{ item.noConfirm }}</span>
						</view>
					</view>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="item" v-for="item in data" :key="item.id" @click="handleClick(item)">
					<view class="right">
						<view class="line1">
							<span><checkbox /></span>
							<span class="circle"></span>
							<span style="font-size: 14px;">{{ item.status }}</span>
						</view>
						<view class="line2">
							<span style="">{{ item.name }}</span>
							<span style="font-weight: 600;" class="fr">{{ item.money }}</span>
						</view>
						<view class="line3">
							<span style="margin-right: 30rpx;">{{ item.type }}</span>
							<span style="">{{ item.id }}</span>
							<span class="noConfirm" style="float: right;">{{ item.noConfirm }}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottomLeft">
				<span>
					<checkbox />
					全选
				</span>
			</view>
			<view class="bottomRight"><button>确认(0)</button></view>
		</view>
	</view>
</template>

<script>
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniTag from '@/components/uni-tag/uni-tag.vue';
export default {
	components: {
		uniSegmentedControl,
		uniPopup,
		uniTag
	},
	data() {
		return {
			status: false,
			currentSelect: 0,
			selectTitle: '全部',
			items: ['全部单据', '未确认单据'],
			current: 0,
			selectList: [{ title: '全部' }, { title: '报销单' }, { title: '借款单' }, { title: '申请单' }],
			data: [
				{
					status: '已完成',
					name: '北京出差报销',
					type: '借款单',
					id: 'j200000001',
					money: '￥1,000,00',
					noConfirm: '未确认',
					path: '/pages/mine/examineApply'
				},
				{
					status: '已完成',
					name: '上海出差报销',
					type: '借款单',
					id: 'j200000002',
					money: '￥803,00',
					noConfirm: '未确认',
					path: '/pages/mine/examineApply'
				},
				{
					status: '已完成',
					name: '深圳出差报销',
					type: '借款单',
					id: 'j200000006',
					money: '￥1,234,00',
					noConfirm: '未确认',
					path: '/pages/mine/examineApply'
				}
			]
		};
	},
	methods: {
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
		},
		open() {
			this.$refs.popup.open();
			this.status = true;
		},
		handleSelect(data, index) {
			this.selectTitle = data.title;
			this.currentSelect = index;
			this.$refs.popup.close();
			this.status = false;
		},
		handleClick(item) {
			console.log(item)
			let url = item.path+"?item="+encodeURIComponent(JSON.stringify(item))
			console.log('url:', url)
			uni.navigateTo({
				url: item.path+"?item="+encodeURIComponent(JSON.stringify(item))
			})
		}
	}
};
</script>

<style scoped>
page {
	background-color: white;
}
.header {
	margin: 0 auto;
	width: 80%;
}

.circle {
	display: inline-block;
	width: 15rpx;
	height: 15rpx;
	border-radius: 50%;
	background-color: $tc;
	margin-right: 10rpx;
}

.left {
	font-size: 45rpx;
	height: 200rpx;
	line-height: 200rpx;
	vertical-align: middle;
	width: 80rpx;
	display: inline-block;
	text-align: center;
}

.right {
	display: inline-block;
	flex: 1;
}

.content {
}
.line1 {
	margin-top: 30rpx;
}

.line2 {
	margin-top: 20rpx;
}

.line3 {
	margin-top: 20rpx;
	font-size: 30rpx;
	font-weight: 200;
	color: gray;
}

.item {
	margin-top: 40rpx;
	height: 200rpx;
	display: flex;
	padding-right: 40rpx;
}

.fr {
	float: right;
}

.noConfirm {
	background-color: #fef4ea;
	color: #f3901f;
	padding: 10rpx;
	font-size: 20rpx;
}

.uni-checkbox-input {
	border-radius: 50% !important;
}
.bottom {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 100rpx;
}
.bottomLeft {
	margin-left: 20rpx;
	font-size: 30rpx;
}
.bottomRight uni-button {
	position: absolute;
	top: -30rpx;
	right: 40rpx;
	background-color: #f3901f;
	color: white;
}

.button-type {
	width: 200rpx;
}
.input-box {
	background: #ebecee;
	border-radius: 30rpx;
	padding: 20rpx 60rpx;
	margin: 10rpx 30rpx;
}
.popup-box {
	padding: 20rpx;
	background-color: #fff;
}
.select-list {
	height: 100%;
	display: flex;
	flex-wrap: wrap;
}
.tags {
	width: 200rpx;
	margin: 10rpx;
}
.tag-icon {
	position: absolute;
	top: 11px;
	right: 15px;
}
</style>
